<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>beginBitmapFill</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<script type="text/javascript" src="../load_lufylegend.js"></script>
        </script>
        <script type="text/javascript">
		if(LGlobal.canTouch){
			LGlobal.stageScale = LStageScaleMode.EXACT_FIT;
			LSystem.screen(LStage.FULL_SCREEN);
		}
        </script>
    </head>
    <body>
        <div id="legend">
        </div>
        <script>
            LInit(50, "legend", 600, 500, main);
            var leftspeed = 0;
            var leftindex = 1;
            var upspeed = 10;
            var upindex = 1;
            var vertices;
            var indices;
            var uvtData;
            var backLayer;
            var bitmapData, earthBitmapData;
            var rows = 24, cols = 24;
            var mi = 0;
            var imgData = [{
                name: "earth",
                path: "earth.jpg"
            }];
            var imglist;
            function main(){
                LLoadManage.load(imgData, null, gameInit);
            }
            
            function gameInit(result){
                imglist = result;
                earthBitmapData = new LBitmapData(imglist["earth"]);
                //earthBitmapData = new LBitmapData("#ffffff", 0, 0, 500, 300);
                
                var i, j;
                var r = 100;
                vertices = new Array();
                for (i = 0; i <= cols; i++) {
                    for (j = 0; j <= rows; j++) {
                        var angle = (90 - 180 * j / rows) * Math.PI / 180;
                        var a = Math.sin(angle);
                        if ((90 - 180 * j / rows) % 90 == 0 && (90 - 180 * j / rows) % 180 != 0) 
                            a = (90 - 180 * j / rows) > 0 ? 1 : -1;
                        if ((90 - 180 * j / rows) % 180 == 0) 
                            a = 0;
                        var sy = -r * a;
                        var sa = Math.cos(angle);
                        if ((90 - 180 * j / rows) % 180 == 0) sa = 1;
                        var sr = Math.abs(r * sa);
                        var angle2 = 360 * (i + 1) / cols;
                        var b = Math.cos(angle2 * Math.PI / 180);
                        if (angle2 % 360 == 0) 
                            b = 1;
                        else if (angle2 % 180 == 0) 
                            b = -1;
                        var sx = sr * b;
                        vertices.push(sx, sy);
                    }
                }
                indices = new Array();
                for (i = 0; i < cols; i++) {
                    for (j = 0; j < rows; j++) {
                        indices.push(i * (rows + 1) + j, (i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1);
                        indices.push((i + 1) * (rows + 1) + j, i * (rows + 1) + j + 1, (i + 1) * (rows + 1) + j + 1);
                    }
                }
                uvtData = new Array();
                for (i = 0; i <= cols; i++) {
                    for (j = 0; j <= rows; j++) {
                        uvtData.push(i / cols, j / rows);
                    }
                }
                backLayer = new LSprite();
                backLayer.x = 200;
                backLayer.y = 200;
                addChild(backLayer);
                backLayer.graphics.clear();
                backLayer.graphics.beginBitmapFill(earthBitmapData);
                backLayer.graphics.drawTriangles(vertices, indices, uvtData);
                
                backLayer.addEventListener(LEvent.ENTER_FRAME, onframe);
            }
            
            function onframe(){
                if (leftspeed < 10 && leftindex++ > leftspeed) {
                    leftindex = 0;
                    for (i = 0; i <= rows; i++) {
                        uvtData.push(uvtData.shift());
                        uvtData.push(uvtData.shift());
                    }
                }
                if (upspeed < 10 && upindex++ > upspeed) {
                    upindex = 0;
                    for (var i = 1; i < uvtData.length; i += 2) {
                        uvtData[i] += 1 / rows;
                        if (uvtData[i] > 1) 
                            uvtData[i] -= 1;
                    }
                }
            }
            
            function runspeed(value){
                leftspeed = 10 - value;
            }
            
            function runmax(value){
                backLayer.scaleX = value / 50;
                backLayer.scaleY = backLayer.scaleX;
            }
        </script>
        <div id="mylegend1" style="position:absolute;top:400px;width:400px;z-index:1;color: #ffffff;background-color:#000000;">
            旋转速度:<input type="number" max="10" min="0" value="10" onchange="runspeed(this.value);"/>
            <br/>
            伸缩:<input type="number" max="100" min="0" value="50" onchange="runmax(this.value);"/>%
        </div>
    </body>
</html>